<template>
    <div class="container">
        <div class="chat-list">
            <div v-for="item in chatList" class="chat-cell">
                <div v-if="item.type === 1" class="left">
                    <img
                            src="@/assets/联系客服-6-assets/客服头.png"
                            alt=""
                            class="avatar support-avatar"
                    />
                    <div class="content">
                        <div class="triangle"></div>
                        123
                        <div class="quick-btn">我买的商品有质量问题如何处理？</div>
                        <div class="quick-btn">我买的商品有质量问题如何处理？</div>
                    </div>
                </div>
                <div v-else class="right">
                    <div class="content">
                        <div class="triangle"></div>
                        1ddd222d23
                    </div>
                    <img
                            src="@/assets/联系客服-6-assets/0.png"
                            alt=""
                            class="avatar user-avatar"
                    />
                </div>
            </div>
        </div>
        <div class="bottom-bar">
            <div class="quick-bar">
                <div class="quick-cell">申请售后</div>
                <div class="quick-cell">售后进度</div>
                <div class="quick-cell">取消</div>
                <div class="quick-cell">查物流</div>
            </div>
            <div class="input-bar">
                <input type="text"/>
                <button class="input-btn"></button>
            </div>
        </div>
        <support-quit
                v-if="showSupportQuit"
                @clickHandle="clickHandle"
                @panelClose="showSupportQuit = false"
        ></support-quit>
    </div>
</template>

<script>
    import supportQuit from "./component/support-quit.vue";

    export default {
        data() {
            return {
                chatList: [{type: 1}, {type: 2}],
                showSupportQuit: false,
                quitStatus: 1
            };
        },
        methods: {
            clickHandle(param) {
                this.quitStatus = param;
                this.$router.go(-1);
            }
        },
        beforeRouteLeave(to, from, next) {
            // this.$router.push('/support')
            this.showSupportQuit = true;
            if (this.quitStatus === 1) {
                next(false);
            } else {
                next()
            }
        },
        components: {
            supportQuit
        }
    };
</script>

<style lang="less" scoped>
    .container {
        min-height: calc(100% - 3.4rem);
        height: auto;
        color: #444444;
        font-size: 0.56rem;

        .chat-list {
            padding: 0.48rem 3.2%;

            .chat-cell {
                margin-bottom: 0.24rem;

                .avatar {
                    width: 1.5rem;
                    height: 1.5rem;
                }

                .support-avatar {
                    margin-right: 0.5rem;
                }

                .user-avatar {
                    margin-left: 0.5rem;
                }

                .content {
                    max-width: calc(100% - 2rem);
                    border-radius: 0.1rem;
                    background: #fff;
                    padding: 0.5rem 0.48rem;
                    position: relative;
                }

                .left {
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;

                    .triangle {
                        position: absolute;
                        left: -0.6rem;
                        top: 0.48rem;
                        height: 0;
                        box-sizing: content-box;
                        border: 0.24rem solid rgba(245, 245, 245, 0);
                        border-right: 0.36rem solid #fff;
                        width: 0;
                    }

                    .quick-btn {
                        border-top: 0.02rem solid rgba(233, 233, 233, 1);
                        color: #1b89bc;
                        padding-top: 0.4rem;
                        margin-top: 0.4rem;
                    }
                }

                .right {
                    width: 100%;
                    display: flex;
                    justify-content: flex-end;

                    .content {
                        background: #0078ff;
                        color: #fff;

                        .triangle {
                            position: absolute;
                            right: -0.6rem;
                            top: 0.48rem;
                            height: 0;
                            box-sizing: content-box;
                            border: 0.24rem solid rgba(245, 245, 245, 0);
                            border-left: 0.36rem solid #0078ff;
                            width: 0;
                        }
                    }
                }
            }
        }

        .bottom-bar {
            padding: 0 3.2%;
            position: fixed;
            width: 100%;
            left: 0;
            bottom: 0;

            .quick-bar {
                display: flex;
                justify-content: space-between;
                margin-bottom: 0.6rem;

                .quick-cell {
                    height: 1rem;
                    border-radius: 0.5rem;
                    background: #fff;
                    border: 0.04rem solid rgba(233, 233, 233, 1);
                    padding: 0 0.4rem;
                }
            }

            .input-bar {
                display: flex;
                margin-bottom: 0.34rem;

                .input-btn {
                    width: 1.12rem;
                    height: 1.12rem;
                    border: none;
                    background: none;
                    background-image: url("../../assets/联系客服-空白页-assets/jia.png");
                    background-size: 100% 100%;
                    margin-left: 3.2%;
                }

                input {
                    width: calc(100% - 1.12rem - 3.2%);
                    background: #fff;
                    border: 0.04px solid rgba(233, 233, 233, 1);
                    padding-left: 3.2%;
                    font-size: 0.48rem;
                }
            }
        }
    }
</style>
